<template>
  <template v-for="(item, index) in menuData" :key="`${props.index}-${index}`">
    <!-- 没有子层级 -->
    <el-menu-item
      @click="
        e => {
          handleClick(e, item.meta.path, `${props.index}-${index}`)
        }
      "
      v-if="!item.children || !item.children.length"
      :index="`${props.index}-${index}`"
    >
      <el-icon size="20">
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.name }}</span>
    </el-menu-item>
    <!-- 有子层级 -->
    <el-sub-menu v-else :index="`${props.index}-${index}`">
      <template #title>
        <el-icon size="20">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.name }}</span>
      </template>
      <TreeMenu :menuData="item.children" :index="`${props.index}-${index}`" />
    </el-sub-menu>
  </template>
</template>

<script setup lanng="ts">
const props = defineProps(['menuData', 'index'])
const router = useRouter()
const handleClick = (e, path, index) => {
  console.log(path)
  router.push(path)
}
</script>

<style scoped></style>
